<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gallery</title>

    <style>
    ul {
        list-style-type: none;
    }

    ul li {
        float: left;
        margin: 20px;
    }

    ul li a img {
        width: 200px;

    }

    #content img {
        width: 100%;
    }
    
    #content {
        width: 600px;
        margin: 60px;
        clear: both;
    }
    
    </style>
</head>
<body>
    <ul id="gallery">
        <li><a href="./images/1.png" title="PIC1"><img src="./images/1-small.png"  alt="PIC1"></a></li>
        <li><a href="./images/2.png" title="PIC2"><img src="./images/2-small.png"  alt="PIC2"></a></li>
        <li><a href="./images/3.png" title="PIC3"><img src="./images/3-small.png"  alt="PIC3"></a></li>
        <li><a href="./images/4.png" title="PIC4"><img src="./images/4-small.png"  alt="PIC4"></a></li>
    </ul>
    <div id="content">

        <img id="image">
        <p id="des">Choose a picture.</p>
    </div>
    


    <script>
        function my$(id) {
            return document.getElementById(id);
        };
        // Get all a elements from ul element.
        var aObjs = my$("gallery").getElementsByTagName("a");
    
        // Onclick for every a element.
        for (var i =0; i < aObjs.length; i++) {
            aObjs[i].onclick = function(){
            
                // a.href ----> img#image
                my$("image").src = this.href;


                // a.alt ----> p#des
                my$("des").innerText = this.title;

                // stop link work
                return false;
            };
        };

    
    
    </script>
</body>
</html>